<!doctype html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">

<html>
<head>
<div th:replace="/console/layout :: head('文库编辑','','')"></div>
<link rel="stylesheet" th:href="@{/assets/vendor/editor.md/css/editormd.min.css}" />
<script th:src="@{/assets/vendor/editor.md/editormd.min.js}"></script>
<script src="http://parsleyjs.org/dist/parsley.min.js"></script>
<script th:src="@{/assets/js/page.edit.js}"></script>
</head>
<body>
	<div th:replace="/console/layout :: header"></div>

	<div th:replace="/console/layout :: sidebar('document_list')"></div>

	<div id="page_content">
		<div id="page_content_inner">

			<ul class="uk-breadcrumb">
				<li><a th:href="@{/console/document}">文库管理</a></li>
				<li><span>文库编辑</span></li>
			</ul>

			<form id="main-form" class="uk-form-stacked" th:action="@{/console/document/save}" method="post"
				th:object="${entity}" data-parsley-validate>
				<input type="hidden" th:field="*{id}"> <input type="hidden" name="catalog" value="">
				<div class="uk-margin">
					<label class="uk-form-label" for="input-title">标题</label>
					<div class="uk-form-controls">
						<input class="uk-input" id="input-title" th:field="*{title}" required data-parsley-required-message="标题不能为空" type="text" placeholder="请输入标题">
					</div>
				</div>
				<div class="uk-margin">
					<label class="uk-form-label" for="input-summary">摘要</label>
					<div class="uk-form-controls">
						<textarea class="uk-textarea" id="input-summary" th:field="*{summary}" placeholder="请输入摘要"></textarea>
					</div>
				</div>
				<div class="uk-margin">
					<label class="uk-form-label" for="input-content">内容 <small><a href="#catalog-slide" uk-toggle>查看目录</a></small></label>
					<div class="uk-form-controls">
						<div id="input-content">
							<textarea style="display: none;" required th:field="*{content}"></textarea>
						</div>
					</div>
				</div>
				<div class="uk-margin">
					<div class="uk-align-right">
						<button class="uk-button uk-button-primary" type="submit">保存</button>
						<button class="uk-button uk-button-default" id="back-button" type="button">返回列表</button>
					</div>
				</div>
			</form>

		</div>
	</div>

	<div th:replace="/console/layout :: footer"></div>

	<div id="catalog-slide" uk-offcanvas>
		<div class="uk-offcanvas-bar" id="toc-container"></div>
	</div>

	<script type="text/javascript" th:inline="javascript">
		var base = /*[[${#httpServletRequest.getContextPath()}]]*/"";
	</script>
	<script type="text/javascript">
		$(function() {
			var $tocContainer = $("#toc-container");
			var $editor = editormd("input-content", {
				width : "100%",
				height : 640,
				syncScrolling : "single",
				toolbarAutoFixed : false,
				emoji : true,
				saveHTMLToTextarea : true,
				imageUpload : true,
				imageFormats : [ "jpg", "jpeg", "gif", "png", "bmp", "webp" ],
				imageUploadURL : base + "/editor/upload",
				tocContainer : $tocContainer,
				tocDropdown : false,
				toolbarIcons : function() {
					return [ "undo", "redo", "|", "bold", "del", "italic", "quote", "|", "list-ul", "list-ol", "hr", "|", "link", "reference-link",
							"image", "elfinder", "code", "preformatted-text", "code-block", "table", "datetime", "emoji", "html-entities",
							"pagebreak", "|", "goto-line", "watch", "preview", "fullscreen", "clear", "search", "|", "help" ];
				},
				toolbarIconsClass : {
					elfinder : "fa-cloud"
				},
				toolbarHandlers : {
					elfinder : function(cm, icon, cursor, selection) {
						var me = this;
						me.onElfinderInsert = function(file, fm) {
							// 相对路径转绝对路径
							var a = document.createElement('a');
							a.href = file.url;
							var url = a.href;

							var alt = "";
							var link = "";

							var altAttr = (alt !== "") ? " \"" + alt + "\"" : "";

							if (link === "" || link === "http://") {
								cm.replaceSelection("![" + alt + "](" + url + altAttr + ")");
							} else {
								cm.replaceSelection("[![" + alt + "](" + url + altAttr + ")](" + link + altAttr + ")");
							}

							if (alt === "") {
								cm.setCursor(cursor.line, cursor.ch + 2);
							}
							me.editor.find(".editormd-elfinder-dialog").hide();
							me.editor.find(".editormd-mask").hide();
							me.lockScreen(false).hideMask();
						}
						me.executePlugin("elfinderDialog", "elfinder-dialog/elfinder-dialog");
					}
				},
				path : base + "/assets/vendor/editor.md/lib/",
				onload : function() {
					$(this.editor).find("textarea[name=" + this.id + "-html-code]").attr("name", "htmlContent");
				}
			});

			//选择文件回调用
			window.editor = $editor;

			var page = $("#page_content_inner").pageedit({
				baseUrl : base + "/console/document",
				onFormValidatedSuccess : function($form) {
					$form.$element.find("input[name=catalog]").val($tocContainer.html());
				}
			});
		});
	</script>
</body>
</html>
